<template>
  <div class="container-box">
    <div class="table-header">
      <span class="left">列表</span>
      <div class="right">
        <el-button type="primary" icon="el-icon-plus" class="add" @click="insertVisible = true">新增</el-button>
        <el-button icon="el-icon-refresh-right" class="refresh" @click="this.getSecretWords">刷新</el-button>
      </div>
    </div>
    <div class="table-box">
      <el-table
        :data="secretWordList"
        :header-cell-style="headerCellStyle"
        style="width: 100%"
        >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="dictLabel"
          label="词语"
          min-width="350"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="屏蔽次数">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          min-width="120"
          fixed="right">
          <template slot-scope="scope">
            <el-link type="danger" class="delete" @click="secretWordDel(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增" width="30%" :visible.sync="insertVisible">
      <div class="formItem">
        <div class="left">
          <div class="label">词语<span>*</span></div>
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="secretWord" label-width="0">
              <el-input v-model="form.secretWord"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="desc">当用户发表评论、攻略时出现该词语将不允许发布信息。</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="background: #3370FF" @click="secretWordInsert">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {sysSecretWordAdd, sysSecretWordDel, sysSecretWordGet} from "@/api/form/systemConfig";

export default {
  mounted() {
    this.getSecretWords()
  },
  data () {
    return {
      insertVisible: false,
      secretWordList: [],
      form: {
        secretWord: ''
      },
      rules: {
        secretWord: {
          required: true,
          message: '请输入关键词',
          trigger: ['blur', 'change']
        }
      }
    }
  },
  computed: {
    headerCellStyle () {
      return {'font-size': '16px','font-weight': 400,color: '#999999',background: '#fff'}
    }
  },
  methods: {
    async getSecretWords() {
      const { code, data, msg } = await sysSecretWordGet()
      if (code === 200) {
        this.secretWordList = data.rows
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    async secretWordDel(secret) {
      const { code, msg } = await sysSecretWordDel({
        dictCode: secret.dictCode
      })
      if (code === 200) {
        this.secretWordList = this.secretWordList.filter(item => item.dictCode !== secret.dictCode)
        this.$message({message: '删除成功', type: 'success'})
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    secretWordInsert() {
      this.$refs.form.validate( async(valid) => {
        console.warn('valid', valid)
        if (valid) {
          const { code, msg } = await sysSecretWordAdd({
            dictLabel: this.form.secretWord
          })
          if (code === 200) {
            this.$message({message: '添加成功', type: 'success'})
            this.insertVisible = false
            this.$refs.form.resetFields()
            await this.getSecretWords()
          } else {
            this.$message({message: msg, type: 'error'})
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--theme_bg_color);
  .table-header {
    padding: 15px 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E7ED;
    background-color: #F2F3F5;
    .left {
      font-size: 16px;
      font-weight: 400;
      color: #111111;
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .add {
        background: #3370FF;
        border: none;
      }
      .export {
        background: #79CF1C;
        border: none;
      }
    }
  }
  .table-box {
    position: relative;
    ::v-deep .el-table {
      position: absolute;
    }
  }
  .formItem {
    width: 100%;
    display: flex;
    margin-bottom: 24px;
    .left, .right {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .left {
      margin-right: 12px;
    }
    .right {
      margin-left: 12px;
      img {
        width: 88px;
        height: 88px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #D0D3D6;
      }
    }
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-bottom: 20px;
      span {
        color: #F54A45;
      }
    }
    .content {
      display: flex;
      align-items: center;
      .choose_item {
        margin-right: 30px;
        display: flex;
        align-items: center;
        .active {
          color: #3370FF;
        }
        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
  .desc {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
</style>
